<template>
    <section>
        <div class="user-avator-dropdown">
            <Dropdown @on-click="handleClick" trigger="click" style="font-size: 16px;color: #afb5bc;">
                <svg style="vertical-align: middle;margin-right: 4px;" t="1714118567661" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8741" width="16" height="16"><path d="M91 177.2m-91 0a91 91 0 1 0 182 0 91 91 0 1 0-182 0Z" fill="#1677FF" p-id="8742"></path><path d="M933 177.2m-91 0a91 91 0 1 0 182 0 91 91 0 1 0-182 0Z" fill="#1677FF" p-id="8743"></path><path d="M929.6 382c-37.7 0-68.3 30.6-68.3 68.3-0.2 193.7-157.3 350.7-351 351-193.8-0.2-350.8-157.2-351-351 0-37.7-30.6-68.3-68.3-68.3s-68.3 30.6-68.3 68.3c0.3 269.1 218.4 487.2 487.5 487.5 269.1-0.3 487.2-218.4 487.5-487.5 0.1-37.7-30.4-68.3-68.1-68.3z" fill="#1677FF" p-id="8744"></path></svg>
                <span style="font-size: 14px;color: #fff;">欢迎，{{user.name}}</span>
                <Icon :size="20" type="md-arrow-dropdown"></Icon>
                <DropdownMenu slot="list">
                    <DropdownItem name="self">
                        <i class="el-icon-user" style="color:deepskyblue"></i>
                        个人中心
                    </DropdownItem>
                    <DropdownItem name="logout">
                        <i class="el-icon-switch-button" style="color:red"></i>
                        退出登录
                    </DropdownItem>

                </DropdownMenu>
            </Dropdown>
        </div>
    </section>
</template>

<script>
import './user.less'
import { mapActions } from 'vuex'

export default {
    name: 'User',
    props: {
        userAvator: {
            type: String,
            default: ''
        },
        userInfo: {
            type: Object,
            default: {}
        }
    },
    watch:{
        userInfo(data){
            this.user = data;
        },
    },
    filters: {

    },
    data () {
        return {
            effectDay: 0,
            sessionDay: 0,
            tokenDay: 0,
            user: this.userInfo,
            submitLoading: false,
        }
    },
    methods: {
        ...mapActions([
            'handleLogOut'
        ]),
        logout () {
            this.handleLogOut().then((res) => {
                localStorage.removeItem('userInfo');
                this.$router.push({name: 'login'})
            })
        },
        handleClick (name) {
            switch (name) {
                case 'logout': this.logout();
                    break;
            }
        },
    },
    mounted(){

    },
    created(){

    },
}
</script>
